<template>
    <div class="profile">
        <div class="profile_menu">
            <div class="">
                <div class="user_message">
                    <p>欢迎: {{$store.state.lognUser.nickname}}</p>
                    <div class="head-pic">
<!--                        <img src="http://localhost:3000/public/img/user-avatar/head_pic.jpg" alt="">-->

                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:3000/sendfile"
                                :show-file-list="false"
                                name="avatar"
                                :with-credentials='true'
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>
                <div class="profile-title">我的账户总览</div>
                <router-link to="/order">我的订单</router-link>
                <router-link to="/collection">我收藏的商品</router-link>
                <router-link to="/history">我的足迹</router-link>
                <router-link to="/common">我的评论</router-link>
                <router-link to="/integral">积分及优惠券</router-link>
            </div>
            <div>
                <router-link to="/user">我的个人信息</router-link>
                <router-link to="/adress">收货地址管理</router-link>
                <router-link to="/changepassword">修改密码</router-link>
            </div>
            <div>

            </div>
        </div>
        <div class="profile_view">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Profile",
        data() {
            return {
                imageUrl: this.$store.state.lognUser.avatar
            }
        },
        methods: {
            handleAvatarSuccess(res, file) {
                // this.imageUrl = URL.createObjectURL(file.raw);
                console.log(res);
                this.imageUrl = res.path
                this.$store.commit('updateImage', this.imageUrl)
            },
            beforeAvatarUpload(file) {
                // const isJPG = file.type === 'image/jpeg';
                // const isLt2M = file.size / 1024 / 1024 < 2;
                // if (!isJPG) {
                //     this.$message.error('上传头像图片只能是 JPG 格式!');
                // }
                // if (!isLt2M) {
                //     this.$message.error('上传头像图片大小不能超过 2MB!');
                // }
                // return isJPG && isLt2M;
            }
        },
        mounted() {
            console.log(this.imageUrl);
        }
    }
</script>

<style scoped>
    .profile {
        display: flex;
        justify-content: space-between;
        width: 970px;
        margin: 100px auto;
        border-top: 1px solid #000000;
        padding-top: 20px;
        }
    .profile_menu {
        width: 190px;
        border: 1px solid #000000;
        font-size: 12px;
        text-align: center;

    }
    .profile_menu div a{
        display: flex;
        height: 30px;
        line-height: 30px;
        justify-content: center;
        color: #000000;
    }
    .profile_menu .head-pic {
        margin: 0 auto;
        border: 1px solid #b0b0b0;
        width: 80%;
    }
    .profile_menu .user_message img{
        width: 100%;
    }
    .profile_menu .user_message p {

        margin: 20px auto;
    }
    .profile_view {
        width: 750px;
    }
    .active-class{
        color: red;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .profile-title {
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        color: #ffffff;
        background-color: #000000;
        margin: 5px;
        font-weight: 700;
    }
</style>